<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>场所检查</title>
    <link rel="stylesheet" href="css/vant.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/inspectionDetails.css?v=0.119">
</head>

<body>
    <div id="app" v-cloak>
        <div class="flex-col page">
            <div class="flex-col flex-auto section">
                <ul class="ub-tableUl" style="top: 0;">
                    <li v-for="(item,index) in list" :key="index"><a :href="'#fire' + index">
                            {{item.name}}
                        </a></li>
                </ul>
                <!-- 检查 -->
                <div class="flex-col group_2 space-y-60" v-cloak style="padding-bottom: 80px;margin-top: 61px;">
                    <div class="ub-lookBox">
                        <p class="ub-lookSmallTit">整改人</span><span style="color: #D20505;">*</span></p>
                        <div class="flex-col justify-start items-start  view">
                            <van-field style="background: #f6f7f9;border-radius: 6px;" v-model.trim="placeName"
                                name="整改人" placeholder="请输入整改人姓名" />
                        </div>
                    </div>
                    <div class="ub-lookBox">
                        <p class="ub-lookSmallTit">联系电话<span style="color: #D20505;">*</span></p>
                        <div class="flex-col justify-start items-start  view">
                            <van-field style="background: #f6f7f9;border-radius: 6px;" v-model.trim="phone" name="联系电话"
                                placeholder="请输入联系电话" />
                        </div>
                    </div>
                    <div class="ub-lookBox">
                        <p class="ub-lookSmallTit">整改时间<span style="color: #D20505;">*</span></p>
                        <div class="flex-col justify-start items-start  view" style="background: rgb(246, 247, 249); padding: 10px 15px; border-radius: 4px; border: 1 px solid
                    rgb(220, 223, 230); color: rgb(96, 98, 102);" @click="dateShow=true">
                            <span v-if="time" v-cloak>{{time}}</span>
                            <span v-else>请选择整改时间</span>
                        </div>
                    </div>


                    <div v-for="(item,index) in list" :key="index" style="position: relative ;">
                        <div :id="'fire' + index"
                            style="position:absolute ;    top: -140px;    width: 10px;    height: 10px;    z-index: -1;">
                        </div>
                        <div class="flex-col" style="margin-top: 0;">
                            <p class="ub-title" v-cloak>{{item.name}}</p>
                            <div class="flex-col section_7 space-y-40" style="margin-bottom: 10px;"
                                v-for="(val,ind) in ans[index]" :key="ind">
                                <div class="flex-col space-y-20">
                                    <div class="flex-col space-y-10">
                                        <div class="flex-row justify-start items-start text-wrapper_3"
                                            style="padding-bottom: 5px;border-bottom: 1px solid #c8c9cc;">
                                            <span class="font_3 text_3" v-cloak>标准{{ind+1}}</span>
                                            <span class="font_3 text_3" v-cloak style="color: red;">[必选]</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="ub-titleBox">
                                    <p>标准要求</p>
                                    <div style="margin-top: 5px;font-weight: bold;" v-cloak>{{val.ques}}</div>
                                </div>
                                <!-- 是否存在风险 -->
                                <div>
                                    <span class="self-start font_6 text_6"><i
                                            v-if="val.is_required == 1">*</i>是否整改完毕：</span>
                                    <div style="width: 100%;padding: 0 10px;margin-top: 10px;">
                                        <van-radio-group v-model="val.is_ok" direction="horizontal" @click="rao(event)">
                                            <van-radio name="1">是</van-radio>
                                            <van-radio name="0">否</van-radio>
                                        </van-radio-group>
                                    </div>
                                </div>
                                <!-- 隐患 -->
                                <div>
                                    <div class="flex-col equal-division-item space-y-19" style="margin-top: 8px;">
                                        <span class="self-start font_6"><i>*</i>情况说明</span>
                                        <div class="section_11">
                                            <div class="flex-col group_6 space-y-107">
                                                <textarea name="" id="" cols="30" rows="10" v-model.trim="val.content"
                                                    class="ub-teret" placeholder="请输入情况说明"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex-col equal-division-item space-y-26" style="margin-top: 8px;">
                                        <span class="self-start font_6"><i>*</i>照片</span>
                                        <div class="flex-row space-x-20">
                                            <van-uploader :after-read="(file)=>afterRead(val,file)"
                                                v-model="val.imageslist" @delete="(file)=>deleteImage(val,file)"
                                                multiple style="width: 100%;" max-count="6" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-row space-x-30 ub-bomBtn">
                        <div class="flex-col justify-start items-center text-wrapper_6">
                            <span class="font_1" @click="goBack()">返回</span>
                        </div>
                        <div class="flex-col justify-start items-center text-wrapper_7" @click="submit()"><span
                                class="font_1">提交</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <van-notify v-model="prompt" type="danger" v-cloak>
            <span>{{promptText}}</span>
        </van-notify>

        <!-- 时间弹窗 -->
        <van-popup v-model="dateShow" position="bottom" round>
            <van-datetime-picker :value="new Date()" :min-date="new Date(2022,1,1)" show-toolbar type="datetime"
                title="选择整改时间" @confirm="dateTimeConfirm" @cancel="dateShow = false" />
        </van-popup>

        <div class="ub-login_box" v-if="loadShow" v-colak>
            <van-loading size="24px" color="#0094ff" text-color="#0094ff" class="ub-login_po" vertical>加载中...
            </van-loading>
        </div>
    </div>


    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vant.min.js"></script>
    <script src="js/jwt-decode.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/cHttp.js?v=1.0.1" type="text/javascript" charset="utf-8"></script>
    <script src="js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/wxPublic.js?v=16.0.0" type="text/javascript" charset="utf-8"></script>
    <script>
        var vue = new Vue({
            el: '#app',
            data() {
                return {
                    placeName: '',
                    phone: '',
                    time: '',
                    _time: '',
                    indexTab: '', //0检查，1检查记录
                    id: '', //场所的id值
                    check_id: '', //检查的id
                    type: '', //检查类型，1普通全部检查，2否的标准进行检查
                    loadShow: false, // 加载
                    inspectList: [], // 检查记录
                    list: {}, // 检查
                    content: '',
                    fileList: [], // 照片
                    fileList2: [], // 照片
                    date: '请选择整改时限', // 时间
                    dateIndex: 0, // 时间对应结果索引
                    dateIndex_1: 0, // 时间对应结果索引
                    dateShow: false, // 时间弹窗
                    prompt: false, // 提示
                    promptText: '', // 提示内容
                    radio3: '', //单选框
                    placeList: [], //时间选择器的数据
                    result: {
                        place_id: '',
                        ans: []
                    },
                    ans: [], //数组结果
                }
            },
            created() {
                this.indexTab = sessionStorage.getItem('numx');
                this.uuid = getRequest().id;
                this.check_id = getRequest().check_id || '';
                this.type = getRequest().type || 1;
                this.getinspect();
                this.getUserInfo()
            },
            mounted() {

            },
            methods: {
                getUserInfo() {
                    ajax({
                        url: formal + '/person/info',
                        type: 'GET',
                        success: (res) => {
                            this.placeName = res.data.realname
                        }
                    })

                },
                // 后退
                goBack(val) {
                    history.back()
                },
                rectificationTime(id) {

                },
                // 前往检查详情
                goRecord(id) {
                    sessionStorage.setItem('record', this.uuid);
                    location.href = "./recordDetails.html?id=" + id + '&type=1';

                },
                // 提交检查
                submit() {
                    const reg =
                        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                    if (!this.placeName) {
                        vant.Toast(`请填写整改人姓名`);
                        return
                    } else if (!reg.test(this.phone)) {
                        vant.Toast(`请填写正确手机号`);
                        return
                    } else if (this.time == '') {
                        vant.Toast(`请选择整改时间`);
                        return
                    }

                    let arr = JSON.parse(JSON.stringify(this.ans))
                    let data = {
                        check_id: this.check_id,
                        realname: this.placeName,
                        phone: this.phone,
                        time: this._time,
                        project: []
                    }
                    for (let i = 0; i < arr.length; i++) {
                        for (let j = 0; j < arr[i].length; j++) {
                            let item = this.ans[i][j]
                            if (item.is_ok.length == 0) {
                                vant.Toast(this.list[i].name + '  标准' + (j + 1) + '中是否整改完毕未选择');
                                return;
                            }
                            if (item.content == '') {
                                vant.Toast(this.list[i].name + ' 标准' + (j + 1) + '中情况说明未填写');
                                return;
                            }
                            if (item.imageslist.length == 0) {
                                vant.Toast(this.list[i].name + ' 标准' + (j + 1) + '中是照片为空');
                                return;
                            }
                            let obj = {
                                project_id: arr[i][j].project_id,
                                is_ok: arr[i][j].is_ok,
                                content: arr[i][j].content,
                                images: arr[i][j].images,
                            }
                            data.project.push(obj)
                        }
                    }
                    ajax({
                        url: formal + '/place-check/save-rectify',
                        type: "POST",
                        data: data,
                        success: (res) => {
                            vant.Toast.success('提交成功');
                            setTimeout(() => {
                                history.back()
                            }, 500)
                        },
                    })
                },

                // 上传图片
                async afterRead(e, file) {
                    //组装数据得到，防止上传一张图片的时候不是数组
                    let files = []
                    if (!file.length) {
                        files.push(file)
                    } else {
                        files = file
                    }
                    // 为新增的图片加上loading
                    let _fLength = files.length

                    let _length = e.imageslist.length - _fLength
                    // 首先判断上一次传输是否已经结束
                    for (let i = 0; i < _length; i++) {
                        if (e.imageslist[i].status == 'uploading') {
                            vant.Toast(
                                '照片传输未结束，请稍等...')
                            // 去除本次上传的所有照片
                            e.imageslist.splice(_fLength * (-1))
                            return;
                        }
                    }
                    for (let i = 0; i < _fLength; i++) {
                        e.imageslist[_length + i].status = 'uploading'
                        e.imageslist[_length +
                            i].message = '上传中'
                    }

                    // 记录上传失败的索引值，最后进行去除
                    let indexErrArr = []
                    // 开始循环上传
                    for (let i = 0; i < _fLength; i++) {
                        let data = {
                            image: files[i].content
                        }
                        const res = await this.upImage(data)
                        if (res.status == 1) {
                            e.imageslist[i + _length].status = 'done'
                            e.imageslist[i + _length].content = res.data.url
                            e.imageslist[i + _length].local = res.data.local
                        } else {
                            vant.Toast(res.message)
                            indexErrArr.push(i + _length)
                        }
                    }

                    // 去除失败的图片
                    indexErrArr.forEach((item, index) => {
                        e.imageslist.splice(item - index, 1)
                    })
                    e.images = []
                    e.imageslist.forEach((item) => {
                        e.images.push(item.local)
                    })
                },
                // 上传接口
                upImage(data) {
                    return new Promise((re, rj) => {
                        $.ajax({
                            url: formal + '/files/image',
                            type: 'POST',
                            data: data,
                            success: (res) => {
                                re(res)
                            },
                            error: (err) => {
                                re(err)
                            }
                        })
                    })
                },
                // 删除照片
                deleteImage(e, file) {
                    e.images = []
                    e.imageslist.forEach((item) => {
                        e.images.push(item.local)
                    })
                },
                // 切换tab
                changeIndexTab(val) {
                    this.indexTab = val
                },
                // 期限选择弹窗
                placeConfirm(value) {
                    this.dateShow = false;
                    this.$set(this.ans[this.dateIndex][this.dateIndex_1], 'deadline', value.value)
                },
                // 检查
                getinspect() {
                    ajax({
                        url: formal + '/place-check/get-check-project?id=' + this.check_id,
                        type: 'GET',
                        success: (res) => {
                            console.log(res)

                            // res.forEach(item)
                            this.list = res;
                            this.ans = []
                            for (let i = 0; i < this.list.length; i++) {
                                this.$set(this.ans, i, [])
                                for (let j = 0; j < this.list[i].list.length; j++) {
                                    let obj = {
                                        project_id: this.list[i].list[j].project_id,
                                        ques: this.list[i].list[j].content,
                                        is_ok: '',
                                        content: '',
                                        images: [],
                                        imageslist: [],
                                        is_required: this.list[i].list[j].is_required
                                    }
                                    this.ans[i].push(obj)
                                }
                            }
                        }
                    })
                },

                datex(index, i) {
                    this.dateShow = true;
                    this.dateIndex = index
                    this.dateIndex_1 = i
                },
                rao(event) {
                    console.log(event)
                },
                // 时间选择器确定事件
                dateTimeConfirm(e) {
                    let time = new Date(e)
                    let t = time.getTime()
                    let year = time.getFullYear()
                    let mon = time.getMonth() + 1
                    mon = mon > 9 ? mon : '0' + mon
                    let day = time.getDate()
                    day = day > 9 ? day : '0' + day
                    let h = time.getHours()
                    h = h > 9 ? h : '0' + h
                    let min = time.getMinutes()
                    min = min > 9 ? min : '0' + min
                    let s = time.getSeconds()
                    s = s > 9 ? s : '0' + s
                    let str = year + '-' + mon + '-' + day + ' ' + h + ':' + min + ':' + s
                    this.time = str
                    this._time = t / 1000
                    this.dateShow = false
                },
            }
        })
    </script>
</body>

</html>